<template>
  <div>
    <el-dialog
      title="高级筛选"
      :visible.sync="dialogVisible"
      width="768px"
      :before-close="handleClose"
    >
      <div style="display: flex;margin: 10px auto;" v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
        <el-select v-model="domain.name" @change="fieldChange(domain.name,index)" placeholder="请选择"
                   style="width: 30%;margin-right: 10px"
        >
          <el-option
            v-for="item in fieldOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="domain.formType" placeholder="请选择" style="width: 30%;margin-right: 10px"
        >
          <el-option
            v-for="item in conditionOptions[index]"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div v-show="dynamicValidateForm.domains[index].name!='date'" style="width: 30%;margin-right: 10px">
          <el-input placeholder="多条件请用;（英文分号）隔开" v-model="domain.values"
          ></el-input>
        </div>
        <div class="block" v-show="dynamicValidateForm.domains[index].name=='date'"
             style="width: 30%;margin-right: 10px"
        >
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
        <el-button @click.prevent="removeDomain(domain)" type="text">删除</el-button>
      </div>
      <p style="color: #ff0000;font-size: 14px" v-show="result">重复的筛选条件，请检查</p>
      <el-button @click.prevent="addDomain()" type="text">添加筛选条件</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="result">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { roleMenuTreeselect } from '@/api/system/menu'

const condition = [
  {
    type: 'string',
    data: [
      { name: '等于', value: '1' },
      { name: '不等于', value: '2' },
      { name: '包含', value: '3' },
      { name: '不包含', value: '4' },
      { name: '开始于', value: '5' },
      { name: '结束于', value: '6' },
      { name: '为空', value: '7' },
      { name: '不为空', value: '8' }
    ]
  },
  {
    type: 'date',
    data: [
      { name: '等于', value: '1' },
      { name: '不等于', value: '2' },
      { name: '早于', value: '3' },
      { name: '不早于', value: '4' },
      { name: '晚于', value: '5' },
      { name: '不早于', value: '6' },
      { name: '不晚于', value: '7' },
      { name: '等于(时间段)', value: '8' },
      { name: '为空', value: '9' },
      { name: '不为空', value: '10' }
    ]
  }]
export default {
  name: 'HighSearch',
  components: {},
  props: {},
  data() {
    return {
      fieldValue: '',
      result: false,
      value1: '',//日期选择器
      dialogVisible: false,
      dynamicValidateForm: {
        domains: [{
          formType: '',
          name: '',
          type: null,
          values: ''
        }],
        email: ''
      },
      fieldOptions: [{
        value: 'leadsName',
        label: '线索名称',
        type: 'string'
      }, {
        value: 'email',
        label: '邮箱',
        type: 'string'
      }, {
        value: 'date',
        label: '日期',
        type: 'date'
      }, {
        value: 'telephone',
        label: '电话',
        type: 'string'
      }, {
        value: 'address',
        label: '地址',
        type: 'string'
      }],
      value: '',
      conditionOptions: []
    }
  },
  // 在实例创建完成后被立即调用
  created() {

  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    // 打开对话框
    open() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    submitForm() {
      // 检查字段是否全部填写
      for (let i = 0; i < this.dynamicValidateForm.domains.length; i++) {
        const dd = this.dynamicValidateForm.domains[i]
        if (dd.name == '' || dd.formType == '' || dd.values == '') {
          this.$message({
            message: '缺失必要的检索条件，请重试',
            type: 'warning'
          })
          return false
        }
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (this.dynamicValidateForm.domains.length <= 1) {
        this.$message({
          message: '已经是最后一个了',
          type: 'warning'
        })
      } else if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        formType: '',
        name: '',
        type: null,
        values: ''
      })
    },
    fieldChange(data, index) {
      // 遍历
      const thisData = this.fieldOptions.filter(it => {
        if (it.value == data) {
          return it
        }
      })
      if (thisData.length > 0) {
        for (let i = 0; i < condition.length; i++) {
          if (condition[i].type == thisData[0].type) {
            this.conditionOptions.push(condition[i].data)
          }
        }
        for (let k = 0; k < this.dynamicValidateForm.domains.length; k++) {
          for (let n = k + 1; n < this.dynamicValidateForm.domains.length; n++) {
            if (this.dynamicValidateForm.domains[k].name == this.dynamicValidateForm.domains[n].name) {
              this.result = true
            } else {
              this.result = false
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
